<title>ear</title>
<meta content="width=device-width,initial-scale=0.9,maximum-scale=0.9,user-scalable=yes" name="viewport">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<style>
@media screen and (orientation:portrait) {}
body{background-color:#f7f3f0;}
li{list-style:none;}
input{padding:5px;font-size:40px;color:#333;box-shadow:2px 2px 3px #ccc;border:solid 1px #aaa;border-radius:3px;}
input:hover{background-color:#ccc}
input:active{background-color:#aaa}
pre{margin:0;font-family:ya;}
.circle{font-size:30px;width:80px;height:80px;border-radius:50%;}
.center{text-align:center;}
.mt10{margin-top:10px;}
#container{width:800px;margin:0 auto;}
#op{min-height:80px;}
#op li{display:inline-block;width:22px;height:46px;}
#op input{margin-right:10px;}
#record{height:400px;overflow-y:auto;}
</style>
<div id="container">
	<div class="center mt10">
		<input type="button" value="开始" onclick="play()" class="circle btn">  
	</div>
	<div id="op" class="center mt10">
		<li><input id="btn1" type="button" value="1" onclick="choose(1);" /><li>
		<li><input id="btn2" type="button" value="2" onclick="choose(2);" /><li>
		<li><input id="btn3" type="button" value="3" onclick="choose(3);" /><li>
		<li><input id="btn4" type="button" value="4" onclick="choose(4);" /><li>
		<li><input id="btn5" type="button" value="5" onclick="choose(5);" /><li>
		<li><input id="btn6" type="button" value="6" onclick="choose(6);" /><li>
		<li><input id="btn7" type="button" value="7" onclick="choose(7);" /><li>
	</div>
	<div id="record" class="center mt10">
		
	</div>
</div>
<script>
function sleep(time){
	return new Promise((resolve) => setTimeout(resolve, time));
}
var names = ['C','D','E','F','G','A','B'];
var nameArr = [];
for(var i=0;i<names.length;i++){
	nameArr[i] = names[i]+3;
}
var sing;
var oldRnd;
var isPlay = false;
async function play(){
	if(isPlay)return;
	isPlay = true;
	//循环播放1-7,再加俩1
	nameArr[7] = ['C3'];nameArr[8] = ['C3'];
	for(var i=0;i<nameArr.length;i++){
		var mp3 = new Audio(nameArr[i]+'.mp3');
		mp3.play();
		var btnIndex = i>=7?1:(i+1);
		var btnStyle = $('btn'+btnIndex).style;
		
		btnStyle.color = 'green';
		btnStyle.fontSize = '44px';
		btnStyle.fontWeight = 'bold';
		
		stop(mp3,500);
		
		await sleep(500);
				
		btnStyle.color = '#333';
		btnStyle.fontSize = '40px';
		btnStyle.fontWeight = 'normal';
		
		await sleep(200);
	}
	
	//间隔半秒
	await sleep(500);
	
	//随机生成音名并播放
	var rnd = parseInt(Math.random() * names.length);
	while(rnd==oldRnd){
		rnd = parseInt(Math.random() * names.length);
	}
	oldRnd = rnd;
	sing = rnd+1;
	log(sing);
	var mp3Rnd = new Audio(nameArr[rnd]+'.mp3');
	mp3Rnd.play();
	stop(mp3Rnd,1000);
	
	isPlay = false;
}
async function choose(v){
	if(isPlay)return;
	var ch = new Audio(nameArr[v-1]+'.mp3');
	ch.play();
	stop(ch,1000);
	
	var ans = '×';
	var color = 'red';
	if(v==sing){
		ans = '√';
		color = 'green';
	}
	
	//添加记录
	var recordTpl = '<pre>[{time}] <span style="color:{color}"><span> 题目：{sing} 选择：{v}</pre>';
	var curTime = new Date()
	var time = curTime.toLocaleString();
	recordTpl = recordTpl.replace("{time}",time);
	recordTpl = recordTpl.replace("{color}",color);
	recordTpl = recordTpl.replace("{sing}",sing);
	recordTpl = recordTpl.replace("{v}",v);
	$('record').innerHTML = recordTpl + $('record').innerHTML;
	
	await sleep(1000);
	play();
}
async function stop(mp3,time){
	for(var v=1;v>=0;v=v-0.01){
		mp3.volume = v;
		await sleep(time*0.01);
	}
	mp3.pause();
	mp3 = null;
}

/*********************/
/*     公用方法      	*/
/********************/
function $(id){
	return document.getElementById(id);
}
function log(...s){
	console.log(...s);
}
</script>